<template>
  <el-drawer title="系统设置" size="300px" v-model="visible" direction="rtl" :before-close="handleClose">
    <el-divider>主题颜色</el-divider>
    <div class="colorList">
      <el-tooltip class="item" effect="dark" :content="item.name"
                  placement="top" v-for="(item,index) in ThemeColors" :key="index">
        <el-tag @click="checkColor(item)" :color="item.color">
          <el-icon class="el-icon-check" v-if="item.color === theme"><Select /></el-icon>
        </el-tag>
      </el-tooltip>
    </div>
    <el-divider>系统布局配置</el-divider>
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-text>开启TopNav</el-text>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-switch v-model="topNav" @change="handleTopNav"></el-switch>
        </el-col>
      </el-row>
    </div>
  </el-drawer>
</template>
<script setup name="Setting">
import {DefaultThemeColor, ThemeColors} from '@/common/constant.js';
import { CacheUtil } from '@/utils/cacheUtil.js'
import { Select } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import {changeColor} from '@/utils/color.js'
import {appStoreHook, permissionStoreHook} from "@/stores/modules.js";

const appStore = appStoreHook()
const permissionStore = permissionStoreHook()
const visible = ref(false);
const theme = ref(DefaultThemeColor);
const topNav = ref(false);
const props = defineProps({
  drawer: {
    type: Boolean,
    required: true,
  }
})

const emits = defineEmits(["close"]);

function handleClose() {
  emits('close');
}
function checkColor(item) {
  if (item.className === theme.value) {
    return;
  }
  CacheUtil.setSystemSetting('themeClass',item.color);
  theme.value = item.color
}

function handleTopNav(v) {
  topNav.value = v;
  CacheUtil.setSystemSetting('topNav',v)
  appStore.toggleTopNav(v);
  if (v) {
    permissionStore.sidebarRouters = []
  } else {
    permissionStore.sidebarRouters = permissionStore.getDefaultRoutes;
  }
}

watch(() => props.drawer, (newVal) => {
  visible.value = newVal
})
watch(() => theme.value, newVal => {
  if(newVal) {
    changeColor('primary',newVal)
  }
})
onMounted(() => {
  let setting = CacheUtil.getSystemSetting()
  if (setting) {
    theme.value = setting['themeClass'] ? setting['themeClass'] : DefaultThemeColor;
    topNav.value = setting['topNav'] ? setting['topNav'] : false;
  }
  changeColor('primary',theme.value)
})
</script>
<style scoped lang="scss">
.colorList {
  padding: 10px 0;
  .el-tag {
    width: 24px;
    height: 24px;
    border: none !important;
    margin-right: 4px;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    text-align: center;
    vertical-align: top;
    margin-top: 5px;
  }
  .el-icon-check {
    color: #fff;
    font-size: 12px;
    line-height: 24px;
  }
}
</style>